import React, { useState,useEffect } from 'react'
import styles from './showConsumer.less'
import { useDispatch, useSelector } from "umi"
import { Select, Form, Input, Button, message, Radio, Table } from 'antd';
import { IUser,ID ,Ap,AA,viE,IER} from '@/utils/interface'
import { models } from '@/.umi/plugin-model/Provider';
const showConsumer: React.FC = () => {
    const [form] = Form.useForm();
    const dispatch = useDispatch()
    const [formLayout, setFormLayout] = useState<string>('用户数据');
    const { IUser,Id ,Aps,AAS,VIES,IEARS} = useSelector(models => (models as {
        addQuestions: {
            IUser: IUser[],
            Id:ID[],
            Aps:Ap[],
            AAS:AA[],
            VIES:viE[],
            IEARS:IER[],
        }
    }).addQuestions)
    const onFormLayoutChange = ({ layout }: { layout: string }) => {
        setFormLayout(layout);
        if (layout === '用户数据') {
            dispatch({
                type: 'addQuestions/User'
            })
        } else if (layout === '身份数据') {
            dispatch({
                type: 'addQuestions/IDentity'
            })
        }else if (layout === 'api接口权限') {
            dispatch({
                type: 'addQuestions/APi'
            })}
        // }else if (layout === '身份和api接口关系') {
        //     dispatch({
        //         type: 'people/Identity'
        //     })
        // }else if (layout === '试图接口权限') {
        //     dispatch({
        //         type: 'people/Identity'
        //     })
        // }else if (layout === '身份和试图权限关系') {
        //     dispatch({
        //         type: 'people/Identity'
        //     })
        // }
        
    };
    useEffect(() => {
        dispatch({
            type: 'addQuestions/User'
        })
        dispatch({
            type: 'addQuestions/IDentity'
        })
        dispatch({
            type: 'addQuestions/APi'
        })
        dispatch({
            type: 'addQuestions/IAA'
        })
        dispatch({
            type: 'addQuestions/VIEW'
        })
        dispatch({
            type: 'addQuestions/IVAR'
        })
    }, [])
    //用户数据
    const columns1 = [
        {
            title: '用户名',
            dataIndex: 'user_name',
            key: 'user_name',
        },
        {
            title: '密码',
            dataIndex: 'user_pwd',
            key: 'user_pwd',
        },
        {
            title: '身份',
            dataIndex: 'identity_text',
            key: 'identity_text',
        },
    ];
    //身份数据
    const columns2 = [
        {
            title: '用户名',
            dataIndex: 'identity_text',
            key: 'identity_id',
        },
    ];
    //api接口权限
    const columns3 = [
        {
            title: 'api权限名称',
            dataIndex: 'api_authority_text',
            key: 'api_authority_id',
        },
        {
            title: 'api权限url',
            dataIndex: 'api_authority_url',
            key: 'api_authority_id',
        },
        {
            title: 'api权限方法',
            dataIndex: 'api_authority_method',
            key: 'api_authority_id',
        },
        
    ];
    //身份和api
    const columns4 = [
        {
            title: '身份名称',
            dataIndex: 'identity_text',
            key: 'identity_api_authority_relation_id',
        },
        {
            title: 'api权限名称',
            dataIndex: 'api_authority_text',
            key: 'identity_api_authority_relation_id',
        },
        {
            title: 'api权限url',
            dataIndex: 'api_authority_url',
            key: 'identity_api_authority_relation_id',
        },
        {
            title: 'api权限方法',
            dataIndex: 'api_authority_method',
            key: 'identity_api_authority_relation_id',
        },
        
    ]

     //身份和api
//      view_authority_id: "r50r9t-1p1kbm"
// view_authority_text: "登录"
// view_id: "login"
     const columns5 = [
        {
            title: '视图权限名称',
            dataIndex: 'view_authority_text',
            key: 'view_authority_text',
        },
        {
            title: '视图权id',
            dataIndex: 'view_id',
            key: 'view_authority_text',
        },

    ]
    const columns6 = [
        {
            title: '身份',
            dataIndex: 'identity_text',
            key: 'identity_view_authority_relation_id',
        },
        {
            title: '视图名称',
            dataIndex: 'view_authority_text',
            key: 'identity_view_authority_relation_id',
        },
        {
            title: '视图id',
            dataIndex: 'view_id',
            key: 'identity_view_authority_relation_id',
        },

    ]
    return <div className={styles.wrap}>
        <h3>用户展示</h3>
        <Form onValuesChange={onFormLayoutChange} initialValues={{ layout: formLayout }} form={form} >
            <Form.Item name='layout'>
                <Radio.Group  >
                    <Radio.Button value="用户数据" className={styles.radio}>用户数据</Radio.Button>
                    <Radio.Button value="身份数据" className={styles.radio}>身份数据</Radio.Button>
                    <Radio.Button value="api接口权限" className={styles.radio}>api接口权限</Radio.Button>
                    <Radio.Button value="身份和api接口关系" className={styles.radio}>身份和api接口关系</Radio.Button>
                    <Radio.Button value="视图接口权限" className={styles.radio}>视图接口权限</Radio.Button>
                    <Radio.Button value="身份和视图权限关系" className={styles.radio}>身份和视图权限关系</Radio.Button>
                </Radio.Group>
            </Form.Item>
        </Form>
        <h1>{formLayout}</h1>
        {
            formLayout==='用户数据'&&<Table dataSource={IUser} columns={columns1} />
        }
         {
            formLayout==='身份数据'&&<Table dataSource={Id} columns={columns2} />
        }
        {
            formLayout==='api接口权限'&&<Table dataSource={Aps} columns={columns3} />
        }
          {
            formLayout==='身份和api接口关系'&&<Table dataSource={AAS} columns={columns4} />
        }
            {
            formLayout==='视图接口权限'&&<Table dataSource={VIES} columns={columns5} />
        }
            {
            formLayout==='身份和视图权限关系'&&<Table dataSource={IEARS} columns={columns6} />
        }
    </div>
}
export default showConsumer